<template>
  <div class="baseDiv">
    <div class="title">
      <div>
        <img class="title-img" src="../../assets/images/log.png">
      </div>
      <div class="title-font">东风（十堰）车身部件有限责任公司总成发交管理板</div>
      <div class="title-time">{{nowTime}}</div>
    </div>
    <div class="imgBox leftFloat">
      <img class="baseImg" src="../../assets/images/fengjian.png" alt="" />
    </div>
    <div class="title-left">
      <el-row>
        <el-col :span="17">
          <div class="title-left-title">发交进度统计</div>
          <el-row>
            <el-col :span="6"><div style="color:rgba(255,255,255,0)">.</div></el-col>
            <el-col :span="18"><div class="total">计划品种</div><div class="total-qty">{{total}}</div></el-col>
            <!--<el-col :span="11"><div class="qty">完成品种</div><div class="total-qty">{{qty}}</div></el-col>-->
          </el-row>
        </el-col>
        <el-col :span="7">
          <div class="title-left-font">发交执行率:</div>
          <el-progress class="dashboard" :width="100" type="dashboard" :stroke-width="10" :percentage="qtyT" :color="colors"></el-progress>
        </el-col>
      </el-row>
    </div>
    <div class="title-right">
      <!--<el-progress :text-inside="true" :format="formatTotal" :stroke-width="24" :percentage="100"></el-progress>
      <el-progress :text-inside="true" :format="formatQty" :stroke-width="24" :percentage="qtyT" status="success"></el-progress>
      <div class="total">计划品种数</div>
      <div class="qty">完成品种数</div>-->
      <el-row>
        <el-col :span="8"><div class="qty">完成品种</div><div class="total-hasQty">{{qty}}</div></el-col>
        <!--<el-col :span="2"><div style="color:rgba(255,255,255,0)">.</div></el-col>-->
        <el-col :span="8"><div class="total">未完成品种</div><div class="total-noQty">{{total-qty}}</div></el-col>
        <!--<el-col :span="2"><div style="color:rgba(255,255,255,0)">.</div></el-col>-->
        <el-col :span="8"><div class="qty">未入库品种</div><div class="total-emptyQty">{{emptyQty}}</div></el-col>
      </el-row>
    </div>
    <el-table
            class="emptyTable"
            highlight-current-row
            :header-cell-style="{'text-align':'center'}"
            :data="list"
            border
            style="width: 100%;">
      <el-table-column type="index" label="序号" width="80">
      </el-table-column>
      <el-table-column
              show-overflow-tooltip
              prop="graphNo"
              label="零件图号"
              width="320"
      >
      </el-table-column>
      <el-table-column
              show-overflow-tooltip
              prop="itemName"
              label="零件名称"
              width="320"
      >
      </el-table-column>
      <el-table-column
              show-overflow-tooltip
              prop="billQuantity"
              label="应发数量"
              min-width="120"
      >
      </el-table-column>
      <el-table-column
              label="未完成数"
              min-width="120"
      >
        <template slot-scope="scope">
          <div>{{ scope.row.outQuantity }}</div>
        </template>
      </el-table-column>
      <el-table-column
              show-overflow-tooltip
              label="状态"
              min-width="140"
      >
      </el-table-column>
    </el-table>
  <vue-seamless-scroll :data="inventoryBalances" class="seamless-warp" :class-option="classOption">
      <el-table
              class="noEmptyTable"
              :show-header="false"
              v-loading="loading.inventoryTable"
              highlight-current-row
              :data="inventoryBalances"
              border
              height="calc(100%)"
              :cell-style="{ textAlign: 'center' }"
              style="width: 100%">
        <el-table-column type="index" label="序号" width="80">
        </el-table-column>
        <el-table-column
                sortable
                show-overflow-tooltip
                prop="graphNo"
                label="零件图号"
                width="320"
        >
        </el-table-column>
        <el-table-column
                sortable
                show-overflow-tooltip
                prop="itemName"
                label="零件名称"
                width="320"
        >
        </el-table-column>
        <el-table-column
                sortable
                show-overflow-tooltip
                prop="billQuantity"
                label="应发数量"
                min-width="120"
        >
        </el-table-column>
        <el-table-column
                sortable
                label="未完成数"
                min-width="120"
        >
          <template slot-scope="scope">
            <div>{{ scope.row.noQty }}</div>
          </template>
        </el-table-column>
        <el-table-column
                sortable
                show-overflow-tooltip
                label="状态"
                min-width="140"
        >
          <template slot-scope="scope">
            <!--<el-tag   v-if="scope.row.flag == 1"   type=""   effect="dark">已完成</el-tag>
            <el-tag   v-if="scope.row.flag == 2"   effect="dark" type="success">部分发交</el-tag>
            <el-tag   v-if="scope.row.flag == 3"   effect="dark" type="success">未入库</el-tag>
            <el-tag   v-if="scope.row.flag == 4"   effect="dark" type="success">在库</el-tag>
            <el-tag   v-if="scope.row.flag == 5"   effect="dark" type="success">已出厂</el-tag>
            <el-tag   v-if="scope.row.flag == 6"   effect="dark" type="success">已送达</el-tag>-->
            <div   v-if="scope.row.flag == 1"   style="background-color: green;font-size: 18px">已完成</div>
            <div   v-if="scope.row.flag == 2"   style="background-color: yellow;color:black;font-size: 18px">部分发交</div>
            <div   v-if="scope.row.flag == 4"   style="background-color: red;font-size: 18px">未入库</div>
            <div   v-if="scope.row.flag == 3"   style="background-color: yellow;color:black;font-size: 18px">在库</div>
            <div   v-if="scope.row.flag == 5"   style="background-color: #5deb6d;font-size: 18px">已出厂</div>
            <div   v-if="scope.row.flag == 6"   style="background-color: #0f5517;font-size: 18px">已送达</div>
          </template>
        </el-table-column>
      </el-table>
    <!--</div>-->
  </vue-seamless-scroll>
  </div>
</template>

<script>
  import vueSeamlessScroll from 'vue-seamless-scroll'
  export default {
    data() {
      return {
        nowTime:"",
        list:[],
        percentage: 10,
        colors: [
          {color: 'yellow', percentage: 20},
          {color: '#8be2ed', percentage: 40},
          {color: '#10a9eff5', percentage: 60},
          {color: '#1023eff5', percentage: 80},
          {color: 'green', percentage: 100}
        ],
        length:0,
        inventoryBalances: [],
        qtyTotal:'0%',
        qty:0,
        total:0,
        qtyT:0,
        noQty:0,
        emptyQty:0,
        searchData: {
          pageNum: 1,
          pageSize: 15,
          total: null,
          keyWords: "",
          factoryCode: PF.getLocal('factoryCode'),
          organizationId: null,
          itemName: "",
          itemCode: "",
          contCode:'',
          graphNo:'',
          wareName: "",
          wareCode: "",
          cellCode:'',
          typeCodeList:null,
          itemTypeCode:''
        },
        loading:{
          itemTable:true,
          inventoryTable:true
        },
        CardPartsStatisticsList:[]
      }
    },
    components: {    //组件
      vueSeamlessScroll
    },
    computed: {

      classOption () {
        return {
          step: 0.7, // 数值越大速度滚动越快
          limitMoveNum: 10, // 开始无缝滚动的数据量 this.dataList.length
          hoverStop: true, // 是否开启鼠标悬停stop
          direction: 1, // 0向下 1向上 2向左 3向右
          openWatch: true, // 开启数据实时监控刷新dom
          singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
          singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
          waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
        }
      }
    },
    created() {
      //this.getInventoryBalanceData();
      //this.start();
      this.showTimes();
    },
    beforeDestroy() {
      clearInterval(this.timer);
      clearInterval(this.timerTwo);
    },
    methods:{
      start(){
        this.timer = setInterval(this.getInventoryBalanceData, 10000); // 注意: 第一个参数为方法名的时候不要加括号;
      },
      handleCurrentChange(val) {
        this.pageNum = val;
        this.getInventoryBalanceData();
      },
     /* handleSelectionChange(val) {
        this.multipleSelection = val;
      },*/
      /*handleSizeChange(val) {
        this.searchData.pageSize = val;
        this.getInventoryBalanceData();
      },*/
      getInventoryBalanceData() {
        this.searchData.pageNum += 1;
        let searchData = PF.JSON(this.searchData);
        if (!PF.isNull(searchData.itemCode)) {
          delete searchData.itemCode;
        }
        if (!PF.isNull(searchData.itemName)) {
          delete searchData.itemName;
        }

        searchData.pageSize = searchData.pageSize;
        this.loading.inventoryTable = true;
        IOT.getServerData(
                /*"/inventorys/findGroupByWareOrgItem",*/
                "/transfer/master/findDpDate",
                "get",
                searchData,
                (ret) => {
                  console.log("查询容器物料详情返回：",ret)
                  if (ret.code === 200) {
                    this.total = 0
                    this.qty = 0
                    this.qtyTotal = '0%'
                    this.qtyT = 0
                    this.noQty = 0
                    this.emptyQty = 0
                    let list = ret.rows;
                    if (list.length > 0){
                      console.log("list:",list.length)
                      console.log("length:",this.length)
                      if (this.length != list.length){
                       /* this.inventoryBalances = [];*/
                       /* location. reload();*/
                      }
                      this.length = list.length;
                      list.forEach(item =>{
                        item.noQty = item.billQuantity - item.outQuantity;
                        this.total += 1;
                        if (item.flag == 1 || item.flag == 5 || item.flag == 6){
                          this.qty += 1;
                        }
                        if (item.flag == 4){
                          this.emptyQty += 1;
                        }
                      })
                      let q = this.qty/this.total;
                      q = q * 100;
                      q = q.toFixed(2);
                      this.qtyT = q;
                      this.qtyTotal = q + "%";
                    }else {
                      this.total = 0
                      this.qty = 0
                      this.qtyTotal = '0%'
                      this.qtyT = 0
                      this.noQty = 0
                      this.emptyQty = 0
                    }
                    this.inventoryBalances = list;
                   /* this.searchData.total = ret.total;
                    this.searchData.pageNum = ret.pageNumber;*/
                    console.log("查询容器物料详情返回：",list)
                  } else {
                    IOT.tips(
                            ret.message || "服务器请求失败，稍后再试！",
                            "error"
                    );
                  }
                }
        );
        this.loading.inventoryTable = false;
      },


      // 显示当前时间
      timeFormate(timeStamp) {
        let year = new Date(timeStamp).getFullYear();
        let month =
                new Date(timeStamp).getMonth() + 1 < 10
                        ? "0" + (new Date(timeStamp).getMonth() + 1)
                        : new Date(timeStamp).getMonth() + 1;
        let date =
                new Date(timeStamp).getDate() < 10
                        ? "0" + new Date(timeStamp).getDate()
                        : new Date(timeStamp).getDate();
        let hh =
                new Date(timeStamp).getHours() < 10
                        ? "0" + new Date(timeStamp).getHours()
                        : new Date(timeStamp).getHours();
        let mm =
                new Date(timeStamp).getMinutes() < 10
                        ? "0" + new Date(timeStamp).getMinutes()
                        : new Date(timeStamp).getMinutes();
        let ss =
                new Date(timeStamp).getSeconds() < 10
                        ? "0" + new Date(timeStamp).getSeconds()
                        : new Date(timeStamp).getSeconds();
        /*     let week = new Date(timeStamp).getDay();
             let weeks = ["日", "一", "二", "三", "四", "五", "六"];
             let getWeek = "星期" + weeks[week];*/
        let nowTime= year + "-" + month + "-" + date +" " + hh + ":" + mm + ":" + ss;
        // console.log("nowTime:",nowTime)
        return nowTime;

      },
      showTimes() {
        this.timerTwo = setInterval(()=>{
          this.nowTime = this.timeFormate(new Date())
        }, 1000);
        // this.clear();
      },
      formatTotal() {
        return this.total;
      },
      formatQty() {
        return this.qty;
      }
    }
  }


</script>


<style>
  .title{
    height: 70px;
    width: 100%;
    background-color: black;
    position: fixed;
  }
  .title-font{
    text-align: center;
    font-size: 40px;
    color: white;
    height: 70px;
    line-height: 70px;
  }
  .title-img{
    position: fixed;
    width: 300px;
    margin-top: 10px;
  }
  .title-time{
    float: right;
    margin-right: 30px;
    color: white;
    margin-top: -40px;
    font-size: 24px;
  }
  .imgBox {
    width: 100%;
    height: 100%;
    margin-top: 70px;
  }
  .baseImg {
    background-size: 100% 100%;
    height: 100vh;
    position: fixed;
    width: 100vw;
  }
  .seamless-warp{
    width: 94%;
    height: calc(100% - 516px);
    /*height:100vh;*/
    overflow: hidden;
    margin: 35px 3% 10% 3%;
  }
  .emptyTable  .el-table__body-wrapper{
    display: none;
  }
  .noEmptyTable{
    background-color:rgba(255,255,255,0);
    height: calc(100% - 516px) !important;
  }
  .noEmptyTable .el-table__body-wrapper .el-table__empty-block{
    display: none;
  }
  .noEmptyTable .el-table__body-wrapper{
    height: 100% !important;
  }
  .title-left{
    font-size:20px;
    color: white;
    width: 21%;
    float: left;
    margin-top: 0.5%;
    margin-left: 3%;
  }
  .title-left-font{
    color: #83f5ff;
    position: relative;
    display: inline-block;
    margin-bottom: 20px;
  }
  .total-qty{
    margin-left: 20%;
  }
  .total-hasQty{
    margin-left: 15%;
    height: 60px;
    width: 60px;
    background-color: green;
    border-radius: 30px;
    text-align: center;
    line-height: 60px;
  }
  .total-noQty{
    margin-left: 15%;
    height: 60px;
    width: 60px;
    background-color: yellow;
    border-radius: 30px;
    text-align: center;
    line-height: 60px;
    color: black;
  }
  .total-emptyQty{
    margin-left: 15%;
    height: 60px;
    width: 60px;
    background-color: red;
    border-radius: 30px;
    text-align: center;
    line-height: 60px;
  }
  .title-left-title{
    color: #83f5ff;
    position: relative;
    margin-bottom: 20px;
  }
  .title-right{
    color: white;
    position: relative;
    /*margin-left: 5%;*/
    padding-top: 15px;
    float: right;
    width: 20%;
    margin-right: 3%;
    font-size:20px;
  }
  .title-right .el-progress{
    line-height: 2.5 !important;
  }
  .title-right /deep/ .el-progress-bar__outer{
    background-color:red !important;
  }
  .title-center{
    color: white;
    position: absolute;
    padding-top: 10%;
    font-size:22px;
    text-align: center;
    width: 100vw;
  }
  .noQty{
    display: inline-block;
    margin-right: 50px;
  }
  .emptyQty{
    display: inline-block;
  }
  .total{
    padding-top:10px;
    margin-bottom: 20px;
  }
  .qty{
    padding-top: 10px;
    margin-bottom: 20px;
  }
  .dashboard .el-progress__text{
    /* position: absolute;*/
    color: white;
  }
  .emptyTable{
    top:35px;
    color:white;
    margin: 0 3% 0 3%;
    width: 94% !important;
    background-color:rgba(255,255,255,0);
    font-family: "微软雅黑";
    font-size: 20px;
  }
  .emptyTable thead tr th{
    border: 0;
    color:white;
    background-color: transparent !important;
  }
  .noEmptyTable{
    /* 表格字体颜色 */
    color:white;
    /* 表格边框颜色 */
    /* border: 0.5px solid #758a99; */
    height: 500px;
    font-size: 20px;
    background-color:rgba(255,255,255,0)
  }
  /* 表格内背景颜色 */
  .noEmptyTable th, .el-table tr,.el-table td{
    border: 0;
    background-color: transparent;
    font-family: "微软雅黑";
  }
  /* 使表格背景透明 */
  .noEmptyTable th, .el-table tr {
    background-color: transparent;
  }
  /* 删除表格下横线 */
  .noEmptyTable::before {
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0px;
  }
  /* 表格表头字体颜色 */
  .noEmptyTable thead {
    color: white;
    font-weight: 500;
    background-color: rgba(148, 144, 144, 0.3)
  }


</style>

